{% extends "base.html" %}

{% block title %}校园活动 - 校园生活助手{% endblock %}

{% block css %}
<style>
    .activity-card {
        border-radius: 0.5rem;
        overflow: hidden;
        transition: transform 0.2s, box-shadow 0.2s;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    .activity-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }
    .activity-image {
        height: 180px;
        overflow: hidden;
    }
    .activity-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s;
    }
    .activity-card:hover .activity-image img {
        transform: scale(1.1);
    }
    .activity-content {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
    }
    .activity-meta {
        margin-top: auto;
    }
    .category-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        border-radius: 1rem;
        background-color: #f8f9fa;
        color: #6c757d;
        margin-right: 0.25rem;
        margin-bottom: 0.25rem;
    }
    .category-badge.important {
        background-color: #ffeaa7;
        color: #d63031;
    }
    .activity-date {
        display: flex;
        align-items: center;
        font-size: 0.875rem;
        color: #6c757d;
    }
    .activity-date i {
        margin-right: 0.5rem;
    }
    .activity-location {
        display: flex;
        align-items: center;
        font-size: 0.875rem;
        color: #6c757d;
    }
    .activity-location i {
        margin-right: 0.5rem;
    }
    .search-bar {
        position: relative;
    }
    .search-bar input {
        padding-left: 2.5rem;
    }
    .search-bar i {
        position: absolute;
        left: 1rem;
        top: 50%;
        transform: translateY(-50%);
        color: #6c757d;
    }
    .calendar-container {
        background-color: #f8f9fa;
        border-radius: 0.5rem;
        padding: 1rem;
    }
    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
    }
    .calendar-nav button {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 1.25rem;
        color: #6c757d;
    }
    .calendar-weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        font-weight: 500;
        color: #6c757d;
        margin-bottom: 0.5rem;
        font-size: 0.875rem;
    }
    .calendar-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 0.25rem;
    }
    .calendar-day {
        aspect-ratio: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0.25rem;
        cursor: pointer;
        font-size: 0.875rem;
        position: relative;
    }
    .calendar-day.today {
        background-color: #007bff;
        color: white;
    }
    .calendar-day.has-event::after {
        content: '';
        position: absolute;
        bottom: 2px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #28a745;
    }
    .calendar-day.selected {
        background-color: #e3f2fd;
        border: 2px solid #007bff;
    }
</style>
{% endblock %}

{% block content %}
<div class="mb-6">
    <h1 class="text-2xl font-bold text-gray-800">
        <i class="fa fa-calendar-check-o mr-2 text-primary"></i>校园活动
    </h1>
    <p class="text-gray-600">发现和参与校园内外的精彩活动</p>
</div>

<!-- 消息提示区域 -->
{% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
        {% for category, message in messages %}
            <div class="alert alert-{{ category }} fade-in mb-4" role="alert">
                <button type="button" class="close" data-bs-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}
{% endwith %}

<div class="row mb-6">
    <!-- 左侧筛选区域 -->
    <div class="col-lg-3 col-md-4 mb-4">
        <div class="bg-white rounded-lg shadow-sm p-4">
            <h3 class="text-lg font-semibold text-gray-800 mb-4">活动筛选</h3>
            
            <!-- 搜索框 -->
            <div class="search-bar mb-4">
                <i class="fa fa-search"></i>
                <input type="text" class="form-control" placeholder="搜索活动名称" id="activity-search">
            </div>
            
            <!-- 活动类型筛选 -->
            <div class="mb-4">
                <h4 class="text-md font-medium text-gray-700 mb-2">活动类型</h4>
                <div class="space-y-2">
                    <label class="d-flex items-center">
                        <input type="checkbox" class="form-check-input mr-2" value="all" checked>
                        <span>全部活动</span>
                    </label>
                    <label class="d-flex items-center">
                        <input type="checkbox" class="form-check-input mr-2" value="academic">
                        <span>学术讲座</span>
                    </label>
                    <label class="d-flex items-center">
                        <input type="checkbox" class="form-check-input mr-2" value="culture">
                        <span>文化活动</span>
                    </label>
                    <label class="d-flex items-center">
                        <input type="checkbox" class="form-check-input mr-2" value="sports">
                        <span>体育赛事</span>
                    </label>
                    <label class="d-flex items-center">
                        <input type="checkbox" class="form-check-input mr-2" value="career">
                        <span>就业招聘</span>
                    </label>
                    <label class="d-flex items-center">
                        <input type="checkbox" class="form-check-input mr-2" value="volunteer">
                        <span>志愿活动</span>
                    </label>
                </div>
            </div>
            
            <!-- 时间筛选 -->
            <div class="mb-4">
                <h4 class="text-md font-medium text-gray-700 mb-2">活动时间</h4>
                <div class="space-y-2">
                    <label class="d-flex items-center">
                        <input type="radio" class="form-check-input mr-2" name="time-filter" value="all" checked>
                        <span>全部时间</span>
                    </label>
                    <label class="d-flex items-center">
                        <input type="radio" class="form-check-input mr-2" name="time-filter" value="today">
                        <span>今天</span>
                    </label>
                    <label class="d-flex items-center">
                        <input type="radio" class="form-check-input mr-2" name="time-filter" value="week">
                        <span>本周</span>
                    </label>
                    <label class="d-flex items-center">
                        <input type="radio" class="form-check-input mr-2" name="time-filter" value="month">
                        <span>本月</span>
                    </label>
                    <label class="d-flex items-center">
                        <input type="radio" class="form-check-input mr-2" name="time-filter" value="custom">
                        <span>自定义</span>
                    </label>
                </div>
                <div class="mt-2" id="custom-date-range" style="display: none;">
                    <input type="date" class="form-control mb-2" id="start-date">
                    <input type="date" class="form-control" id="end-date">
                </div>
            </div>
            
            <!-- 优先级筛选 -->
            <div class="mb-4">
                <h4 class="text-md font-medium text-gray-700 mb-2">活动优先级</h4>
                <div class="space-y-2">
                    <label class="d-flex items-center">
                        <input type="checkbox" class="form-check-input mr-2" value="important">
                        <span>重要活动</span>
                    </label>
                    <label class="d-flex items-center">
                        <input type="checkbox" class="form-check-input mr-2" value="recommended">
                        <span>推荐活动</span>
                    </label>
                </div>
            </div>
            
            <!-- 筛选按钮 -->
            <button class="btn btn-primary w-100 mb-2">
                <i class="fa fa-filter mr-2"></i>应用筛选
            </button>
            <button class="btn btn-secondary w-100">
                <i class="fa fa-refresh mr-2"></i>重置筛选
            </button>
        </div>
        
        <!-- 活动日历 -->
        <div class="calendar-container mt-4">
            <div class="calendar-header">
                <h4 class="font-medium">2023年11月</h4>
                <div class="calendar-nav">
                    <button><i class="fa fa-chevron-left"></i></button>
                    <button><i class="fa fa-chevron-right"></i></button>
                </div>
            </div>
            <div class="calendar-weekdays">
                <div>日</div><div>一</div><div>二</div><div>三</div><div>四</div><div>五</div><div>六</div>
            </div>
            <div class="calendar-days">
                <div class="calendar-day"></div>
                <div class="calendar-day"></div>
                <div class="calendar-day">1</div>
                <div class="calendar-day">2</div>
                <div class="calendar-day">3</div>
                <div class="calendar-day">4</div>
                <div class="calendar-day">5</div>
                <div class="calendar-day">6</div>
                <div class="calendar-day">7</div>
                <div class="calendar-day">8</div>
                <div class="calendar-day">9</div>
                <div class="calendar-day">10</div>
                <div class="calendar-day">11</div>
                <div class="calendar-day">12</div>
                <div class="calendar-day">13</div>
                <div class="calendar-day">14</div>
                <div class="calendar-day">15</div>
                <div class="calendar-day has-event">16</div>
                <div class="calendar-day">17</div>
                <div class="calendar-day today has-event">18</div>
                <div class="calendar-day">19</div>
                <div class="calendar-day">20</div>
                <div class="calendar-day">21</div>
                <div class="calendar-day">22</div>
                <div class="calendar-day has-event">23</div>
                <div class="calendar-day">24</div>
                <div class="calendar-day">25</div>
                <div class="calendar-day">26</div>
                <div class="calendar-day">27</div>
                <div class="calendar-day">28</div>
                <div class="calendar-day has-event">29</div>
                <div class="calendar-day">30</div>
            </div>
        </div>
    </div>
    
    <!-- 右侧活动列表 -->
    <div class="col-lg-9 col-md-8">
        <!-- 活动分类导航 -->
        <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
            <div class="flex flex-wrap gap-2">
                <button class="btn btn-primary">全部活动</button>
                <button class="btn btn-outline-secondary">最新发布</button>
                <button class="btn btn-outline-secondary">热门活动</button>
                <button class="btn btn-outline-secondary">即将开始</button>
                <button class="btn btn-outline-secondary">我的活动</button>
            </div>
            <div class="mt-3 flex justify-end">
                <a href="{{ url_for('add_activity') }}" class="btn btn-success">
                    <i class="fa fa-plus mr-2"></i>发布活动
                </a>
            </div>
        </div>
        
        <!-- 活动列表 -->
        <div class="row">
            {% if activities %}
                {% for activity in activities %}
                <div class="col-lg-6 col-md-6 mb-4">
                    <div class="activity-card bg-white shadow-sm">
                        <div class="activity-image">
                            <img src="{{ activity.image_url or 'https://via.placeholder.com/800x450?text=活动图片' }}" alt="{{ activity.title }}">
                        </div>
                        <div class="activity-content p-4">
                            <div class="flex justify-between items-start mb-2">
                                <h3 class="font-semibold text-gray-800">
                                    {{ activity.title }}
                                    {% if activity.is_important %}
                                    <span class="ml-2 text-danger"><i class="fa fa-exclamation-circle"></i></span>
                                    {% endif %}
                                </h3>
                            </div>
                            <div class="mb-3">
                                <div class="flex flex-wrap">
                                    <span class="category-badge {{ 'important' if activity.is_important else '' }}">{{ activity.category }}</span>
                                    {% if activity.tags %}
                                        {% for tag in activity.tags.split(',') %}
                                        <span class="category-badge">{{ tag }}</span>
                                        {% endfor %}
                                    {% endif %}
                                </div>
                            </div>
                            <p class="text-gray-600 mb-4 line-clamp-2">{{ activity.description }}</p>
                            <div class="activity-meta">
                                <div class="activity-date mb-2">
                                    <i class="fa fa-calendar-o"></i>
                                    {{ activity.start_date.strftime('%Y-%m-%d %H:%M') if activity.start_date else '未设置' }} {% if activity.end_date %}- {{ activity.end_date.strftime('%Y-%m-%d %H:%M') }}{% endif %}
                                </div>
                                <div class="activity-location mb-3">
                                    <i class="fa fa-map-marker"></i>
                                    {{ activity.location or '未设置' }}
                                </div>
                                <div class="flex justify-between items-center">
                                    <div class="text-sm text-gray-500">
                                        <i class="fa fa-user-circle mr-1"></i>
                                        {{ activity.organizer }}
                                    </div>
                                    <div class="flex gap-2">
                                        <button class="btn btn-sm btn-outline-primary">
                                            <i class="fa fa-heart-o mr-1"></i>
                                            {{ activity.likes }}
                                        </button>
                                        <a href="{{ url_for('activity_detail', id=activity.id) }}" class="btn btn-sm btn-primary">详情</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            {% else %}
                <div class="col-12 text-center py-10">
                    <i class="fa fa-calendar-o text-4xl text-gray-300 mb-3"></i>
                    <p class="text-gray-500">暂无活动记录</p>
                    <a href="{{ url_for('add_activity') }}" class="btn btn-primary mt-3">
                        <i class="fa fa-plus mr-2"></i>发布第一个活动
                    </a>
                </div>
            {% endif %}
        </div>
        
        <!-- 分页控制 -->
        {% if total_pages > 1 %}
        <div class="mt-6 d-flex justify-content-center">
            <nav aria-label="活动分页">
                <ul class="pagination">
                    {% if current_page > 1 %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ current_page - 1 }}" aria-label="上一页">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    {% endif %}
                    
                    {% for page_num in range(1, total_pages + 1) %}
                    {% if page_num == current_page %}
                    <li class="page-item active">
                        <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                    </li>
                    {% else %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ page_num }}">{{ page_num }}</a>
                    </li>
                    {% endif %}
                    {% endfor %}
                    
                    {% if current_page < total_pages %}
                    <li class="page-item">
                        <a class="page-link" href="?page={{ current_page + 1 }}" aria-label="下一页">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                    {% endif %}
                </ul>
            </nav>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block js %}
<script>
    // 时间筛选显示/隐藏自定义日期范围
    document.querySelectorAll('input[name="time-filter"]').forEach(radio => {
        radio.addEventListener('change', function() {
            const customDateRange = document.getElementById('custom-date-range');
            if (this.value === 'custom') {
                customDateRange.style.display = 'block';
            } else {
                customDateRange.style.display = 'none';
            }
        });
    });
    
    // 活动类型全选/取消全选
    const allCheckbox = document.querySelector('input[value="all"]');
    const typeCheckboxes = document.querySelectorAll('input[type="checkbox"][value]:not([value="all"]):not([value="important"]):not([value="recommended"])');
    
    allCheckbox.addEventListener('change', function() {
        typeCheckboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });
    
    typeCheckboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            // 检查是否所有类型都被选中
            const allChecked = Array.from(typeCheckboxes).every(cb => cb.checked);
            allCheckbox.checked = allChecked;
            
            // 如果全选被选中，则取消选中
            if (allCheckbox.checked && !this.checked) {
                allCheckbox.checked = false;
            }
        });
    });
    
    // 活动卡片悬停效果
    const activityCards = document.querySelectorAll('.activity-card');
    activityCards.forEach((card, index) => {
        setTimeout(() => {
            card.style.opacity = '1';
            card.style.transform = 'translateY(0)';
        }, 100 * index);
    });
    
    // 日历日期点击事件
    const calendarDays = document.querySelectorAll('.calendar-day:not(:empty)');
    calendarDays.forEach(day => {
        day.addEventListener('click', function() {
            // 移除其他日期的选中状态
            calendarDays.forEach(d => d.classList.remove('selected'));
            // 添加当前日期的选中状态
            this.classList.add('selected');
            
            // 这里应该触发日期筛选
            console.log('选择了日期:', this.textContent);
        });
    });
    
    // 搜索框回车事件
    document.getElementById('activity-search').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            // 这里应该触发搜索
            console.log('搜索内容:', this.value);
        }
    });
    
    // 活动分类导航按钮点击事件
    const navButtons = document.querySelectorAll('.btn-outline-secondary');
    const primaryButton = document.querySelector('.btn-primary');
    
    navButtons.forEach(button => {
        button.addEventListener('click', function() {
            // 移除所有按钮的主按钮样式
            navButtons.forEach(btn => {
                btn.classList.remove('btn-primary');
                btn.classList.add('btn-outline-secondary');
            });
            
            // 添加当前按钮的主按钮样式
            this.classList.remove('btn-outline-secondary');
            this.classList.add('btn-primary');
            
            // 取消全部分类按钮的主按钮样式
            primaryButton.classList.remove('btn-primary');
            primaryButton.classList.add('btn-outline-secondary');
        });
    });
    
    primaryButton.addEventListener('click', function() {
        // 移除所有按钮的主按钮样式
        navButtons.forEach(btn => {
            btn.classList.remove('btn-primary');
            btn.classList.add('btn-outline-secondary');
        });
        
        // 添加当前按钮的主按钮样式
        this.classList.remove('btn-outline-secondary');
        this.classList.add('btn-primary');
    });
</script>
{% endblock %}